import { loginApi } from '@/apis/user'
import { RADIUS, ROUTER_PATHS_PUBLIC } from '@/constants/global'
import useUserInfo from '@/zustand/useUserInfo'
import { LockOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Col, Form, Input, Result, Row } from 'antd'
import { MacScrollbar } from 'mac-scrollbar'
import { useCallback, useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import { useNavigate } from 'react-router-dom'

export default function Login() {
  const navigate = useNavigate()

  const token = useUserInfo((s) => s.token)
  const setToken = useUserInfo((s) => s.setToken)

  const [form] = Form.useForm<USER.ILoginP>()
  /** 👇 是否为登陆中 👇 */
  const [loading, setLoading] = useState(false)
  /** 👇 登录的逻辑处理 👇 */
  const onFinish = useCallback(
    (values: USER.ILoginP) => {
      setLoading(true)
      loginApi(values)
        .then((res) => {
          setToken(res.token)
          toast.success('登录成功 !')
          navigate(ROUTER_PATHS_PUBLIC.SLASH, { replace: true })
        })
        .catch(() => {})
        .finally(() => setLoading(false))
    },
    [navigate, setToken]
  )

  useEffect(() => {
    if (token) navigate(ROUTER_PATHS_PUBLIC.SLASH, { replace: true })
  }, [navigate, token])

  return token ? null : (
    <MacScrollbar className="h-[100%]" suppressScrollX>
      <Row className="h-[100%] px-[15%]" align={'middle'}>
        <Col md={12} xs={0}>
          <Result icon={<SmileOutlined />} className="pt-0" title="Welcome To Login Page !" />
        </Col>
        <Col md={12} xs={24}>
          <div className="mx-auto max-w-[350px] pb-[50px] pt-[10px]">
            <div
              className={`mb-[22px] h-[40px] bg-slate-500 text-center text-[18px] font-bold leading-[40px] text-white ${RADIUS}`}
            >
              {import.meta.env.VITE_LOGIN_TITLE}
            </div>

            <Form<USER.ILoginP> form={form} onFinish={onFinish}>
              <Form.Item
                name="loginName"
                initialValue={'admin'}
                rules={[{ required: true, message: 'Please input your userName !' }]}
              >
                <Input size="large" placeholder="Username" prefix={<UserOutlined />} />
              </Form.Item>

              <Form.Item
                name="password"
                initialValue={'123456'}
                rules={[{ required: true, message: 'Please input your password !' }]}
              >
                <Input.Password
                  size="large"
                  type="password"
                  placeholder="Password"
                  prefix={<LockOutlined />}
                />
              </Form.Item>

              <Button
                size="large"
                type="primary"
                htmlType="submit"
                loading={loading}
                className="w-[100%]"
              >
                LOGIN
              </Button>
            </Form>
          </div>
        </Col>
      </Row>
    </MacScrollbar>
  )
}
